<template>
  <div class="box2">
    <div class="topNav">
      <p>All apps</p>
      <el-button @click.stop="toPinned">
        <i class="el-icon-arrow-left el-icon--left"></i>Back
      </el-button>
    </div>
    <div class="tabList" v-if="!jump" @scroll="onScroll">
      <div
        class="scroll-item"
        :id="item.main"
        v-for="(item, index) in tabListData"
        :key="index"
        :ref="setRef"
      >
        <h5 @click="showLetter">{{item.mainList.length>0?item.main:''}}</h5>
        <div class="loopItem" v-for="(cont,inv) in item.mainList" :key="inv">
          <img :src="cont.url" alt />
          <p>{{cont.name}}</p>
        </div>
      </div>
    </div>
    <div class="point" v-if="jump">
      <div
        :class="['letter',item.checked?'letters':'']"
        v-for="(item,index) in letterData"
        :key="index"
        @click="scrollToPosition(index)"
      >{{item.name}}</div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, nextTick, onMounted } from 'vue';
export default {
  data() {
    return {
      activeStep: 0,
    };
  },
  setup(props, { emit }) {
    const jump = ref(false);
    const toPinned = () => {
      emit('changeTag');
    };
    const tabListData = reactive([
      {
        main: '&',
        mainList: [],
      },
      {
        main: '#',
        mainList: [],
      },
      {
        main: 'A',
        mainList: [
          { name: 'Alarms', url: require('@/assets/img/icon/alarm.png') },
        ],
      },
      {
        main: 'B',
        mainList: [],
      },
      {
        main: 'C',
        mainList: [
          {
            name: 'Calculator',
            url: require('@/assets/img/icon/calculator.png'),
          },
          { name: 'Calendar', url: require('@/assets/img/icon/calender.png') },
          { name: 'Camera', url: require('@/assets/img/icon/camera.png') },
          { name: 'Cortana', url: require('@/assets/img/icon/cortana.png') },
        ],
      },
      {
        main: 'D',
        mainList: [
          { name: 'Discord', url: require('@/assets/img/icon/discord.png') },
        ],
      },
      {
        main: 'E',
        mainList: [
          { name: 'Edge', url: require('@/assets/img/icon/edge.png') },
          { name: 'Excel', url: require('@/assets/img/icon/excel.png') },
        ],
      },
      {
        main: 'F',
        mainList: [
          { name: 'Feedback', url: require('@/assets/img/icon/feedback.png') },
          {
            name: 'File Explorer',
            url: require('@/assets/img/icon/explorer.png'),
          },
        ],
      },
      {
        main: 'G',
        mainList: [
          {
            name: 'Get Started',
            url: require('@/assets/img/icon/getstarted.png'),
          },
          { name: 'Github', url: require('@/assets/img/icon/github.png') },
          {
            name: 'Groove Music',
            url: require('@/assets/img/icon/groove.png'),
          },
        ],
      },
      {
        main: 'H',
        mainList: [
          { name: 'Help', url: require('@/assets/img/icon/help.png') },
        ],
      },
      {
        main: 'I',
        mainList: [],
      },
      {
        main: 'J',
        mainList: [],
      },
      {
        main: 'K',
        mainList: [],
      },
      {
        main: 'L',
        mainList: [],
      },
      {
        main: 'M',
        mainList: [
          { name: 'Mail', url: require('@/assets/img/icon/mail.png') },
          { name: 'Maps', url: require('@/assets/img/icon/maps.png') },
          { name: 'Movies', url: require('@/assets/img/icon/movies.png') },
          { name: 'MsOffice', url: require('@/assets/img/icon/msoffice.png') },
        ],
      },
      {
        main: 'N',
        mainList: [
          { name: 'Narrator', url: require('@/assets/img/icon/narrator.png') },
          { name: 'News', url: require('@/assets/img/icon/news.png') },
          { name: 'Notepad', url: require('@/assets/img/icon/notepad.png') },
        ],
      },
      {
        main: 'O',
        mainList: [
          { name: 'OneDrive', url: require('@/assets/img/icon/oneDrive.png') },
          { name: 'OneNote', url: require('@/assets/img/icon/onenote.png') },
          { name: 'Outlook', url: require('@/assets/img/icon/outlook.png') },
        ],
      },
      {
        main: 'P',
        mainList: [
          { name: 'Paint', url: require('@/assets/img/icon/paint.png') },
          { name: 'People', url: require('@/assets/img/icon/people.png') },
          { name: 'Photos', url: require('@/assets/img/icon/photos.png') },
          {
            name: 'Pinterest',
            url: require('@/assets/img/icon/pinterest.png'),
          },
          {
            name: 'PowerPoint',
            url: require('@/assets/img/icon/powerpoint.png'),
          },
        ],
      },
      {
        main: 'Q',
        mainList: [],
      },
      {
        main: 'R',
        mainList: [
          { name: 'Recycle Bin', url: require('@/assets/img/icon/bin0.png') },
        ],
      },
      {
        main: 'S',
        mainList: [
          { name: 'Security', url: require('@/assets/img/icon/security.png') },
          { name: 'Settings', url: require('@/assets/img/icon/settings.png') },
          { name: 'Share', url: require('@/assets/img/icon/share.png') },
          { name: 'Skype', url: require('@/assets/img/icon/skype.png') },
          { name: 'Snipping Tool', url: require('@/assets/img/icon/snip.png') },
          { name: 'Soltaire', url: require('@/assets/img/icon/soltaire.png') },
          { name: 'Spotify', url: require('@/assets/img/icon/spotify.png') },
          { name: 'Sticky Notes', url: require('@/assets/img/icon/notes.png') },
          { name: 'Store', url: require('@/assets/img/icon/store.png') },
        ],
      },
      {
        main: 'T',
        mainList: [
          { name: 'Teams', url: require('@/assets/img/icon/teams.png') },
          { name: 'Terminal', url: require('@/assets/img/icon/terminal.png') },
          { name: 'Tips', url: require('@/assets/img/icon/tips.png') },
          { name: 'To Do', url: require('@/assets/img/icon/todo.png') },
          {
            name: 'Twitter Tool',
            url: require('@/assets/img/icon/twitter.png'),
          },
        ],
      },
      {
        main: 'U',
        mainList: [],
      },
      {
        main: 'V',
        mainList: [
          { name: 'VS Code', url: require('@/assets/img/icon/code.png') },
          {
            name: 'Voice Recorder',
            url: require('@/assets/img/icon/voice.png'),
          },
        ],
      },
      {
        main: 'W',
        mainList: [
          { name: 'Weather', url: require('@/assets/img/icon/weather.png') },
          { name: 'White Board', url: require('@/assets/img/icon/board.png') },
        ],
      },
      {
        main: 'X',
        mainList: [
          { name: 'Xbox', url: require('@/assets/img/icon/weather.png') },
        ],
      },
      {
        main: 'Y',
        mainList: [
          { name: 'Yammmer', url: require('@/assets/img/icon/yammer.png') },
          { name: 'Your Phone', url: require('@/assets/img/icon/yphone.png') },
        ],
      },
      {
        main: 'Z',
        mainList: [],
      },
    ]);
    const letterData = reactive([
      { name: '&', checked: false },
      { name: '#', checked: false },
      { name: 'A', checked: false },
      { name: 'B', checked: false },
      { name: 'C', checked: false },
      { name: 'D', checked: false },
      { name: 'E', checked: false },
      { name: 'F', checked: false },
      { name: 'G', checked: false },
      { name: 'H', checked: false },
      { name: 'I', checked: false },
      { name: 'J', checked: false },
      { name: 'K', checked: false },
      { name: 'L', checked: false },
      { name: 'M', checked: false },
      { name: 'N', checked: false },
      { name: 'O', checked: false },
      { name: 'P', checked: false },
      { name: 'Q', checked: false },
      { name: 'R', checked: false },
      { name: 'S', checked: false },
      { name: 'T', checked: false },
      { name: 'U', checked: false },
      { name: 'V', checked: false },
      { name: 'W', checked: false },
      { name: 'X', checked: false },
      { name: 'Y', checked: false },
      { name: 'Z', checked: false },
    ]);
    const showLetter = () => {
      jump.value = true;
      for (let i = 0; i < tabListData.length; i++) {
        for (let j = 0; j < letterData.length; j++) {
          if (
            tabListData[i].main == letterData[j].name &&
            tabListData[i].mainList.length > 0
          ) {
            letterData[j].checked = true;
          }
        }
      }
    };
    function scrollToPosition(index) {
      for (var i = 0; i < tabListData.length; i++) {
        if (index === i) {
          tabListData[i].scrollIntoView({
            block: 'start', //默认跳转到顶部
            behavior: 'smooth', //滚动的速度
          });
        }
      }
      this.jump = true;
    }
    function onScroll(e) {
      for (let i = tabListData.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          tabListData[i].offsetTop - tabListData[0].offsetTop;
        if (judge) {
          window.activeStep = i;
          break;
        }
      }
    }
    return {
      toPinned,
      tabListData,
      letterData,
      jump,
      showLetter,
      scrollToPosition,
      onScroll,
    };
  },
  methods: {},
};
</script>

<style lang='scss' scoped>
.tabList::-webkit-scrollbar {
  display: none;
}
.tabList {
  text-align: left;
  height: 422px;
  overflow: auto;
  h5 {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 8px 4px;
    font-size: 0.76em;
    font-weight: 400;
    cursor: pointer;
  }
  .loopItem {
    display: flex;
    padding: 8px 0 8px 0px;
    img {
      width: 20px;
      height: 20px;
    }
    p {
      margin-left: 30px;
      line-height: 20px;
    }
  }
}
.point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 160px;
  height: 280px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(7, minmax(0, 1fr));
  cursor: pointer;
  .letter {
    color: rgba(0, 0, 0, 0.36);
  }
  .letters {
    color: #010101;
  }
}
.box2 {
  font-size: 12px;
  .topNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #666;
    .el-button {
      height: auto;
      min-height: auto;
      background: rgba(255, 255, 255, 0.9);
      padding: 5px 8px;
      border-radius: 3px;
      font-size: 12px;
      color: #333;
      .el-icon--right {
        margin-right: 3px;
      }
    }
  }
}
</style>